<style>
/* 全局聊天消息样式 */
.websocket .msgShow {
  /* background-color: #fff; */
  position: relative;
  display: flex;
  margin: 1rem;
  min-height: 3rem;
}
.websocket .msgShow .username {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  /* background-color: #0f6957; */
  border-radius: 50%;
  line-height: 3rem;
  text-align: center;
  color: rgb(245, 239, 239);
  font-size: 1.6rem;
  box-shadow: 1px 1px 9px 0px #444;
}
.websocket .msgShow img {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  box-shadow: 1px 1px 9px 0px;
}
.websocket .msgShow .img {
  display: inline-block;
  position: absolute;
  top: 1px;
}
.websocket .msgShow .text {
  display: inline-block;
  padding: 5px;
  border-radius: 6px;
  max-width: 15rem;
  margin-top: 10px;
}

/* 其他人聊天消息 */
.userColor {
  background-color: #0f6957;
}
.usertext {
  background-color: #0f6957;
  margin-left: 4rem;
  color: rgb(221, 214, 214);
}
/* 自己消息样式 */
.selfColor {
  background-color: #f15a22;
}
.right {
  flex-direction: row-reverse;
}
.selftext {
  background-color: #f15a22;
  margin-right: 4rem;
  color: rgb(229, 226, 226);
}

/* 头部 */
.websocket .mint-header {
  background-color: #0f6957;
}
/* 弹窗 */
.websocket .mint-popup {
  width: 100%;
  height: 100%;
}
/* 主体 */
.websocket .msgmain {
  min-height: 100%;
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-image: url(../assets/img/background/msgbj.gif);
}
.websocket .content {
  height: 6rem;
}
/* 发送消息 */
.websocket .sendmsg {
  position: fixed;
  width: 100%;
  display: flex;
  bottom: -20px;
}
.websocket .mint-search {
  width: 90%;
  height: 4rem;
}
.websocket .sendmsg .mint-button {
  width: 5rem;
  height: 2.8rem;
  border-radius: 0;
  background-color: #d9d9d9;
}
.websocket .sendmsg .mintui {
  opacity: 0;
}
.websocket .mint-searchbar-inner {
  border-radius: 6px;
}
.websocket .mint-searchbar-core,
.websocket .mint-searchbar-inner {
  background-color: #f15a22;
  color: rgb(240, 239, 239);
}
.websocket .mint-searchbar-core::placeholder {
  color: rgb(250, 240, 240);
}

.websocket .mint-searchbar-cancel {
  color: #999;
  width: 0px;
  height: 0px;
  overflow: hidden;
}
.websocket .mint-button-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: #f15a22;
  background-color: rgba(1, 1, 1, 0);
}
</style>
<template>
  <div class="websocket">
    <mt-popup v-model="popupVisible">
      <!-- 头部开始 -->
      <mt-header title="聊天室">
        <router-link slot="left" :to="{ name: `${this.back}` }">
          <mt-button icon="back" ></mt-button>
        </router-link>
      </mt-header>
      <!-- 头部结束 -->
      <!-- 消息主体开始 -->
      <div class="msgmain" id="im-record">
        <!-- 测试样式开始 -->、
      

        <!-- 测试样式结束 -->

        <!-- 
          该处创建独立组件msgShow
          其他用户和自己的消息样式不同：
          1.username类名的元素追加类名：userColor/selfColor (控制头像背景颜色)
          2.text类名的元素追加类名：usertext/selftext (控制文本样式位置)
          3.如果消息uid为自己uid，为组件msgShow类名后追加right类名 （控制消息元素位置）


         -->

        <!-- msgShow组件开始 -->
        <div
          class="msgShow"
          :class="{right:item.uid==uid}"
          v-for="(item, index) in messageList"
          :key="index"
        >
          <div class="img">
            <!-- <img src="../assets/img/user/user1.jpg" alt="" /> -->
            <span class="username" :class="{userColor:true,selfColor:item.uid==uid}">{{ item.nickname[0] }}</span>
          </div>
          <span class="text" :class="{usertext:true,selftext:item.uid==uid}">{{ item.msg }}</span>
        </div>
        <!-- msgShow组件结束 -->

        <div class="content"></div>
      </div>
      <!-- 消息主体结束 -->
      <!-- 发送消息开始 -->
      <div class="sendmsg"  @keyup.enter ="sendMsg">
        <mt-search v-model="msg" cancel-text="取消" placeholder="发送消息">
        </mt-search>

        <mt-button size="small" @click="sendMsg" >发送</mt-button>
      </div>
      <!-- 发送消息结束 -->
    </mt-popup>
  </div>
</template>
<script>
import Popup from "./Popup.vue";
export default {
  components: {
    Popup,
  },
  data() {
    return {
      // 初始化数据
      back: "message",
      popupVisible: true,

      // websocket数据
      uid: "",
      msg: "",
      socket: "",
      bridge: [], //用于储存用户uid
      groupId: "",
      messageList: [
      
      ],

      users: [],
      groups: [],
    };
  },
  mounted() {
    // 将自己和聊天对象的uid储存到bridge中
    // this.bridge.push(this.$store.state.dataUser.uid);
    // this.bridge.push(this.$route.params.targetUid)
  
    // 根据路由传值判断返回的父组件
    if (this.$route.params.parent) {
      this.back = this.$route.params.parent;
    }
   

    // websocket
    // 1.将缓存中的用户信息中的uid和nickname挂载到全局
    let vm = this;
    let user = sessionStorage.getItem("resultData"); //该处在用户登录时便储存该用户信息
    user = (user && JSON.parse(user)) || {};
    vm.uid = user.uid;
    vm.nickname = user.user_name;
    // 2.创建websocket连接服务器: 创建了连接发送了一个消息，并且时刻监控数据更新
    if (vm.uid) {
      vm.connectWebSocket();
    }

    //3.绑定发送消息事件
    // document.onkeydown = function (event) {
    //   var e = event || window.event;
    //   if (e && e.keyCode == 13) {
    //     //a.先判断当前界面拥有的数据
    //     if (!this.msg) {
    //       return;
    //     }
       
    //     //b.发送文本消息
    //     this.sendMessage(100, this.msg);
    //   }
    // };

    //4.退出聊天时：该处关闭该聊天界面就为退出聊天，可设为关闭消息页才退出聊天
    window.onbeforeunload = function (e) {
      //  发送消息
      vm.socket.send(
        JSON.stringify({
          uid: vm.uid,
          type: 2,
          nickname: vm.nickname,
          bridge: [],
        })
      );
    };

   
  },
 
  methods: {
    enter(){
      console.log("dddd")
    },
 

    // 发送消息

    sendMsg() {
      //a.先判断当前界面拥有的数据
      if (!this.msg) {
        console.log("输入为空，不能发送");
        return;
      }
      // if (!this.bridge.length && !this.groupId) {
      //   //bridge中必须要有值，值为消息发送目标用户
      //   console.log("bridge和groupid同时为空，不能发送");
      //   return;
      // }
      //b.发送文本消息
      this.sendMessage(100, this.msg);
    },
    // 连接服务器方法
    connectWebSocket() {
      let vm = this;
      if (window.WebSocket) {
        vm.socket = new WebSocket("ws://45.32.43.131:8001");
        let socket = vm.socket;

        // 连接成功事件
        socket.onopen = function (e) {
          console.log("websocket服务器连接成功");
          vm.sendMessage(1); //发送消息
        };

        // 关闭和错误事件
        socket.onclose = function (e) {
          console.log("websocket服务器关闭");
        };
        socket.onerror = function () {
          console.log("websocket连接出错");
        };

        // 接收服务器的消息：将会更新三个值：messageList/users/groups
        socket.onmessage = function (e) {
          let message = JSON.parse(e.data);

          vm.messageList.push(message);

          // 判断返回的链接桥，将增加的链接追加到连接桥中
          // if(message.bridge.length){
          //      var newBridge = message.bridge.filter(i=>{
          //        return i !== vm.$store.state.dataUser.uid
          //      })
          //     console.log(newBridge)
          //     vm.bridge.concat(newBridge)
          //     console.log(vm.bridge)
          // }
          if (message.users) {
            vm.users = message.users;
          }
          if (message.groups) {
            vm.groups = message.groups;
          }

           vm.$nextTick(function () {
            var div = document.getElementById("im-record");
            div.scrollTop = div.scrollHeight;
          });
          
        };
      }
    },

    sendMessage(type, msg) {
      this.socket.send(
        JSON.stringify({
          uid: this.uid, //用户id
          type: type, //用户方式
          nickname: this.nickname, //昵称
          msg: msg, //消息
          bridge: this.bridge, //连接桥
          groupId: this.groupId, //群id
        })
      );
      this.msg = "";
    },
  },
};
</script>